<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>index</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
     <link href="/static/css/main.css" rel="stylesheet">
           <style>
        h1,h2,h3,h4,h5,h6{
            font-family:微软雅黑；
        }
        *{
            margin: 0;
            padding: 0;
        }
        #table-container{
            height: 450px;
        }
        #page-list .my-hidden{
            display: none;
        }
        #page-list #page-pre, #page-list #page-next{
            display: inline;
        }
    </style>
</head>
<body>
<!--导航-->
{% include "../base/header.html" %}

  <div class="container-fluid">
    <div class="row">
        <!--菜单-->
      {% include "../base/menu.html" %}

      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h2 class="sub-header">Section title</h2>
          
          
          <form id="mydemo2" enctype="multipart/form-data">
              <input type="file" name="upfile" id="upfile" value="">
              
                <a class="btn btn-success" onclick="func1()">上传</a>
          </form>

        <button class="btn btn-success" onclick="test(1)">test</button>

        <!--表格分页的内容-->
        <div class="table-responsive">
            <!--固定高度的容器-->
            <div id="table-container">
                <!--table-->
                <table class="table table-striped" >
                    <thead>
                      <tr>
                        <th>ip</th>
                        <th>machine</th>
                        <th>mac</th>
                          <th>version</th>
                        <th>station</th>
                        <th>update</th>
                        <th>edit</th>
                      </tr>
                    </thead>
                    <tbody id="tbody"></tbody>
              </table>
            </div>
            <!--分页列表-->
          <nav aria-label="Page navigation">
              <!--按钮列表-->
              <ul class="pagination" id="page-list"></ul>
          </nav>
        </div>



      </div>
    </div>
  </div>




<script src="/static/js/jquery-1.12.4.js"></script>
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
 <script>
     //上传文件的函数
     function func1(){
         var file=$("#upfile")[0].files[0]
         var formData=new FormData()
         formData.append('upfile',file)
         $.ajax({
             type:"post",
             url:'upfile/',
             data: formData,
             processData: false,
             contentType: false,
             success:function (data) {
                 console.log(data)
             },
             error:function (xhr) {
                 console.log(xhr)
             }
         })
     }

     //获取表格数据的ajax
     //n为传过来的页码
    function getTableData(n) {
        var page=n?n:1 //不传页码的话默认为1
        $.ajax({
            type:'get',
            url:'getTable/?page='+page,
            dataType:'json',
            success:function (data) {
                {#console.log(data);#}
                var title = data.title;
                var html='';
                var content=data.content;
                for(var i=0;i<content.length;i++){
                    html+=`
                        <tr>
                            <td>${content[i].ip}</td>
                            <td>${content[i].machine}</td>
                            <td>${content[i].mac}</td>
                            <td>${content[i].version}</td>
                            <td>${content[i].station}</td>
                            <td>${content[i].update}</td>
                          </tr>
                    `
                }
                $("#tbody").html(html)
            },
            error:function (xhr) {
                console.log(xhr)
            }
        })
    }

    //渲染分页导航列表的,默认只显示1-5页和上一页/下一页的按钮
    function getTablePage(){
         $.ajax({
             type:'get',
             url:'getTable/',
             dataType:'json',
             success:function (data) {
                 console.log(data.sheet_rows)
                 page_number = Math.floor(data.sheet_rows/10)+1
                 list = ''
                 for(var i=0;i<page_number;i++){
                     list+=`
                     <li data-page=${i+1} class="${i+1==1?'active':''} ${i+1>5?'my-hidden':''} " ><span >${i+1}</span></li>
                     `
                 }
                 var Previous = `
                    <li id="page-pre" data-page="pre">
                      <span aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </span>
                    </li>
                 `
                 var Next = `
                    <li id="page-next" data-page="next">
                      <span  aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </span>
                    </li>
                 `

                 var html=Previous+list+Next
                 $('#page-list').html(html)

             }
         })
    }
    //为每个spen (包括上一页和下一页)绑定点击事件
     $("#page-list").on("click","li>span",function(){
         //获取当前点击的li 页码
         var page_number = $(this).parent().attr("data-page") //这里不能用parseInt() 不然下面判断上一页和下一页的会失效
         // 获取当前所有的li -2  得到最大页码
         var max_page_number = parseInt($(this).parent().parent().children().length - 2)
         //
         if (page_number == "pre" || page_number == "next"){ //如果页码值为上一页，下一页
             getPre_Next(page_number,max_page_number)
         }else { //如果页码值数字按钮
             page_number = parseInt(page_number)
             //获取ajax 内容
             getTableData(page_number,max_page_number)
             //切换样式
             $(this).parent().addClass('active').siblings().removeClass('active')
             //将当前活动的li 对象和最大页码传给处理页码显示的函数
             handle_li($(this).parent(),max_page_number)

         }
     })
     // 为上一页和下一页按钮绑定点击事件
    function getPre_Next(page_number,max_page_number){
         if(page_number == "pre"){ //如果点击的是上一页
             //找到 class 为active的li 然后获取它的 data-page(页码) 在-1 传给获取表格数据的ajax函数
             var old_page_number = parseInt($("#page-list>li.active").attr("data-page"))
             var pre_page_number = parseInt(old_page_number -1)
             if(pre_page_number < 1){ //如果页码小于1
                 alert("Min page is 1")
             }else {
                 getTableData(pre_page_number)
                 $("#page-list>li.active").removeClass("active").prev().addClass("active")
                 //将当前活动的li 对象和最大页码传给处理页码显示的函数
                 var active_li = $("#page-list>li.active")
                 handle_li(active_li,max_page_number)
             }

         }else {//如果点击的是下一页
            //找到 class 为active的li 然后获取它的 data-page(页码) 在+1 传给获取表格数据的ajax函数
             var old_page_number = $("#page-list>li.active").attr("data-page")
             var next_page_number = parseInt(old_page_number) +1

             if(next_page_number > max_page_number){ //如果页码大于最大页码
                 alert("Max page is"+ max_page_number)
             }else {
                 getTableData(next_page_number)
                 $("#page-list>li.active").removeClass("active").next().addClass("active")
                 //将当前活动的li 对象和最大页码传给处理页码显示的函数
                 var active_li = $("#page-list>li.active")
                 handle_li(active_li,max_page_number)
             }

         }
    }
    // 处理页码列表显示的函数
    function handle_li(active_li,max_page_number) {
         /**
          * active_li :当前活动的li(jq对象)
          * max_page_number : 页码的最大值
          * **/
         var page_number = parseInt(active_li.attr('data-page')) //获取当前li的页码
         var _siblings = active_li.siblings()  //取出当前li的所有兄弟li

         for (var i = 0;i<_siblings.length;i++){
         var _siblings_page_number=parseInt($(_siblings[i]).attr('data-page')) //获取当前li 所有兄弟元素的页码
         console.log(_siblings_page_number)
         if(page_number < 3 ){ //当前活动的页码小于3 时候显示1-5
             if(_siblings_page_number <=5){
                 $(_siblings[i]).removeClass('my-hidden')
             }else {
                 $(_siblings[i]).addClass('my-hidden')
             }
         }else if(page_number > parseInt(max_page_number - 2)){ //当前活动的页码大于最大页码-2 时候显示最后5页
             if(_siblings_page_number > parseInt(max_page_number - 5)){
                 $(_siblings[i]).removeClass('my-hidden')
             }else {
                 $(_siblings[i]).addClass('my-hidden')
             }
         }else { //当li 的页码比当前活动li的页码 大于2或者小于2时候隐藏
             if(_siblings_page_number > parseInt(page_number +2) || _siblings_page_number < parseInt(page_number -2)){
                 $(_siblings[i]).addClass('my-hidden')
             }else {
                 $(_siblings[i]).removeClass('my-hidden')
             }

         }
         }
     }

    $(function () {
        getTablePage() // 获取分页列表
        getTableData(1) //获取ajax 数据 默认显示第一页
    })
 </script>
</body>
</html>